<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
    <script>

        // var box = document.querySelector(".box");
        // console.log(box);
    
        // console.log("加载完成")
    
        // onload = function(){
        //     var box = document.querySelector(".box");
        //     console.log(box);
        // }
    
    </script>
</head>
<body style="height:2000px">
    <!-- 关于html标签的区别 -->
    <!-- 不可置换：只能通过css进行样式修饰，自身内容不会影响样式 -->
    <div class="box"></div>
    <!-- 可置换：自身样式，可以由引入的资源，或非样式属性控制 -->
    <img src="./logo.png" alt="" class="img">

</body>
<script>
    var box = document.querySelector(".box");
    console.log(box);

    var img = document.querySelector(".img");
    console.log(img);
    console.log(img.offsetWidth);

    onload = function(){
        // console.log("加载完成")
        // var box = document.querySelector(".box");
        // console.log(box);
        console.log(img.offsetWidth);
    }

    onscroll = function(){
        // console.log("滚动了")
        // 获取滚走了的距离
        console.log( document.documentElement.scrollTop );
        console.log( document.documentElement.scrollLeft );
    }

    document.onclick = function(){
        // 修改滚动条的位置
        document.documentElement.scrollTop = 100;
    }

    onresize = function(){
        // console.log("大小改变了")
        // 获取页面可视区域的尺寸
        console.log( document.documentElement.clientWidth );
        console.log( document.documentElement.clientHeight );
    }



</script>
</html>